<template>
	<div>
		<nav-bar title="图文分享"/>
		<!-- 引入返回导航 -->
		<div class="photo-header">
			<ul>
				<li v-for="c in categorys" :key="c.id">
					<a @click="loadImgsByCategoryId(c.id)" href="javascipt:;">{{c.title}}
					</a>
				</li>
			</ul>
		</div>
		<!-- 下方图片 -->
		<div class="photo-list" :style="{ height: boxHeight }" >
			<mt-loadmore :auto-fill="false" :bottom-method="loadBottm" ref="loadmore" :bottom-all-loaded="isAllLoaded">
				<ul>
					<li v-for="(img,index) in imgs" :key="img.index">
						<!-- 关于value是否给单引号的问题：
						给了是字符串，不给是从vue中获取数据 -->
						<router-link :to="{name:'photo.detail',query:{id:img.id}}">
							<!-- @load="ImgLoaded" -->
							<img v-lazy="img.img" :onerror="errorImg"/>
							<div class="mask">
								<span>图片id:{{img.id}}</span>
								<br>
								<span>图片摘要:{{getImgName(img.img)}}</span>
							</div>
						</router-link>
					</li>
				</ul>
			</mt-loadmore>
		</div>
	</div>
</template>
<script>
	export default {
		props:['apprefs'], // 接收父组件参数
		data() {
			return {
				imgs:[], //加载一次图片数据
				isAllLoaded:false, //全部数据是否加载(当数据库数据已无可加载数据时设置为true)
				errorImg: 'this.src="' + require('../../assets/img/index/error.jpg') + '"'  , // 图片错误时替换图
				loadingImg: require('../../assets/img/index/loading.gif'), // 正在加载图
				boxHeight: 0, // 父元素盒子高度
				categorys:[ //分类信息
					{  id: 0,title:'全部'  },
					{  id: 1,title:'二次元'  },
					{  id: 2,title:'摄影设计'  },
					{  id: 3,title:'明星美女'  },
					{  id: 4,title:'动漫'  },
					{  id: 5,title:'家居生活'  },
					{  id: 6,title:'清纯甜美'  }
				],
			}
		},
		beforeRouteUpdate (to, from ,next) {
			// 路由复用，带参数改变触发，参数指query||params
			//console.log(to);
			this.loadImgById(to.params.categoryId);
			next();
		},
		// 适合操作数据
		created() {
			// 1.获取路有参数categoryId
			let categoryId = this.$route.params.categoryId;
			this.loadImgById(categoryId);
			// 2.获取分类信息 -> 此处定义了categorys数组模拟数据
			/*this.$axios.get('/getImgCategory')
			.then( res => {
				this.categorys = res.data.result;

				//向数组的第一个元素添加 一个全部分类
				this.categorys.unshift({
					id:0,title:'全部'
				})
			})
			.catch( err => console.log('获取分类失败',err));*/
		},
		// 适合操作DOM元素
		mounted() {
		    // 装载数据完毕，就收apprefs.appHeader
		    // 公式：设备高度 - 头 - 尾 = 中间的高度 (loadmore父元素的高度)
		    let headerHeight = this.apprefs.appHeader.$el.offsetHeight;
		    let footerHeight = this.apprefs.appFooter.$el.offsetHeight;

		    this.boxHeight = document.body.clientHeight - headerHeight - footerHeight;
		},
		
		methods: {
			/*点击图片分类时改变路由参数*/
			loadImgsByCategoryId (categoryId) {
				this.$router.push({
					name:'photo.list',
					params:{
						categoryId
					}
				})
			},
			// 通过id获取图片数据
			loadImgById(id) {
				// 2.通过url拼接参数发请求
				this.$axios.get('https://api.apiopen.top/getImages'/*+ id*/)
				.then( res =>{
					// 该数据不改锚点
					this.imgs = res.data.result;
					// 判断是否有图片
					if(this.imgs.length === 0){
                        this.$toast({
                            message: '没有图片了',
                            iconClass: 'iconfont icon-bixin'
						});
					}

				})
				.catch( err => console.log('图片列表获取失败',err))
				// 3.获取数据做渲染 
			},
			// 下拉或输入页码后追加数据，原本是按所选图片类型再追加，此处接口有限
			concatImg() {
				this.$axios.get('https://api.apiopen.top/getImages'/* ?page=' + page*/)
				.then(res => {
					// 判断是否还有数据
					if(res.data.result.length === 0) {
						this.$toast('没有更多数据了');
						// loadmore的禁止loadBottom函数调用的属性
						this.isAllLoaded = true;
					}
					this.imgs = this.imgs.concat(res.data.result);
					// 通知元素重新定位
					this.$refs.loadmore.onBottomLoaded();
				})
				.catch(err => console.log('更多图片获取失败',err));
			},
			loadBottm() {
				this.concatImg(this.page);
			},
			// 获取图片名称
			getImgName(img_url) {
				var urlPath = img_url.replace(/^http:\/\/[^/]+/, "");
				var path = urlPath.substr(urlPath.lastIndexOf('/', urlPath.lastIndexOf('/') - 1) + 1);
				var index = path.lastIndexOf("\/");
				//js 获取字符串中最后一个斜杠后面的内容
				var addrLast = decodeURI(path.substring(index + 1, path.length));
				//js 获取字符串中最后一个斜杠前面的内容
				// var str = decodeURI(path.substring(0, path));
				return addrLast;
			}
						
		}

	}
</script>
<style scoped>
	.photo-header li {
		list-style: none;
		display: inline-block;
		margin-left: 10px;
		height: 30px;
	}
	.photo-header ul {
		/*强制不换行*/
		white-space: nowrap;
		overflow-x: auto;
		padding-left: 0px;
		margin: 5px;
	}
	
	/*下面的图片*/
   .photo-list li {
      margin: -18px 0px 0px -40px;
      list-style: none;
      position: relative;
    }
    .photo-list li img {
      /*margin: 0px 0px 0px -20px;*/
      width: 100%;
     /* height: 100%;*/
      vertical-align: top;
      position: relative;
    }
    .photo-list ul {
      padding: absolute;
      bottom: 0px;
      color: white;
      background-color: rgba(0,0,0,0.3);
      margin-bottom: 0px;
    }
    /*遮罩层*/
    .mask {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 22%;
      background: rgba(101,101,101,0.3);
      color: #fff;
      opacity: 0;  /*鼠标不在图片上时，遮罩层不显示*/
    }
    /*鼠标移入显示遮罩层*/
    .photo-list .mask:hover {
      display: block;
      opacity: 1;
    }
    .photo-list a div {
      padding: 15px 0px 0px 15px;
    }
    .photo-list div span:nth-child(1) {
      font-weight: bold;
      font-size: 16px;
    }
    
    /*图片懒加载样式*/
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>